<section class="horizontal-form container-fluid">
  {{#unless disableHeader}}
    <h2>
      {{#if isNew}}
        {{t "modalAddCloudKey.header.new"}}
      {{else if isEdit}}
        {{t "modalAddCloudKey.header.edit"}}
      {{/if}}
    </h2>
  {{/unless}}
  <hr />

  <FormNameDescription
    @model={{primaryResource}}
    @namePlaceholder="modalAddCloudKey.name.placeholder"
    @descriptionPlaceholder="modalAddCloudKey.description.placeholder"
  />

  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "modalAddCloudKey.type"}}
      </label>

      {{#if singleCloudKeyChoice}}
        <div class="pt-10 pl-10">
          {{singleCloudKeyChoice}}
        </div>
      {{else}}
        <select class="form-control" onchange={{action "selectConfig" value="target.value"}}>
          {{#if (not-eq cloudCredentialType value)}}
            <option value="" selected=true>
              {{t "modalAddCloudKey.typeSelect.prompt"}}
            </option>
          {{/if}}
          {{#each configChoices as |choice|}}
            <option value="{{choice.name}}" selected={{eq choice.name cloudCredentialType}}>
              {{choice.displayName}}
            </option>
          {{/each}}
        </select>
      {{/if}}

    </div>

    {{#if (eq cloudCredentialType "amazon")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.region.label"}}{{field-required}}
          </label>
          <select class="form-control" onchange={{action (mut region) value="target.value"}}>
            <option value="" selected={{eq region choice}}>Select a region</option>
            {{#each regionChoices as |choice|}}
              <option value={{choice}} selected={{eq region choice}}>{{choice}}</option>
            {{/each}}
          </select>
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="amazonec2-accessKey">
            {{t "modalAddCloudKey.amazonec2.accessKey.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            name="username"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.amazonec2.accessKey.placeholder")
            value=config.accessKey
            id="amazonec2-accessKey"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label" for="amazonec2-secretKey">
            {{t "modalAddCloudKey.amazonec2.secretKey.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            name="password"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.amazonec2.secretKey.placeholder")
            value=config.secretKey
            id="amazonec2-secretKey"
          }}
        </div>
      </div>
    {{else if (eq cloudCredentialType "azure")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.azure.subscriptionId.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.subscriptionId
            classNames="form-control"
            placeholder=(t "nodeDriver.azure.subscriptionId.placeholder")
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="azure-clientId">
            {{t "modalAddCloudKey.azure.clientId.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.clientId
            classNames="form-control"
            id="azure-clientId"
            placeholder=(t "modalAddCloudKey.azure.clientId.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label" for="azure-clientSecret">
            {{t "modalAddCloudKey.azure.clientSecret.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.clientSecret
            classNames="form-control"
            id="azure-clientSecret"
            placeholder=(t "modalAddCloudKey.azure.clientSecret.placeholder")
          }}
        </div>
      </div>
    {{else if (eq cloudCredentialType "digitalOcean")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="digitalocean-accessToken">
            {{t "modalAddCloudKey.digitalocean.accessToken.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.accessToken
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.digitalocean.accessToken.placeholder")
            id="digitalocean-accessToken"
          }}
          <p class="text-info">
            {{t "modalAddCloudKey.digitalocean.accessToken.help" htmlSafe=true}}
          </p>
        </div>
      </div>
    {{else if (eq cloudCredentialType "google")}}
      <div class="row">
        <div class="col span-12">
          {{#input-text-file
            label="clusterNew.googlegke.credential.label"
            value=config.authEncodedJson
            accept="text/*, .json"
            minHeight=60
            canChangeName=false
            nameRequired=true
            placeholder="clusterNew.googlegke.credential.placeholder"
            concealValue=true as |section|
          }}
            {{#if (eq section "description")}}
              <div class="row">
                <div class="col span-12 wrap mb-0">
                  {{t "clusterNew.googlegke.credential.helpText" htmlSafe=true}}
                </div>
              </div>
            {{/if}}
          {{/input-text-file}}
        </div>
      </div>
    {{else if (eq cloudCredentialType "linode")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="linode-token">
            {{t "modalAddCloudKey.linode.token.label"}}
            {{field-required}}
          </label>
          {{input
            type="password"
            value=config.token
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.linode.token.placeholder")
            id="linode-token"
          }}
          <p class="text-info">
            {{t "modalAddCloudKey.linode.token.help" htmlSafe=true}}
          </p>
        </div>
      </div>
    {{else if (eq cloudCredentialType "oci")}}
      <div class="row">

        <div class="col span-6">
          <label class="acc-label" for="oci-tenancy">
            {{t "modalAddCloudKey.oci.tenancyOcid.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            name="tenancy"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.oci.tenancyOcid.placeholder")
            value=config.tenancyId
            id="oci-tenancy"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label">
            {{t "modalAddCloudKey.oci.authRegion.label"}}{{field-required}}
          </label>
          <select class="form-control" onchange={{action (mut config.region) value="target.value"}}>
            <option value="" selected={{eq config.region choice}}>Select a region to authenticate credentials</option>
            {{#each ociRegionChoices as |choice|}}
              <option value={{choice}} selected={{eq config.region choice}}>{{choice}}</option>
            {{/each}}
          </select>
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="oci-userId">
            {{t "modalAddCloudKey.oci.userOcid.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            name="username"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.oci.userOcid.placeholder")
            value=config.userId
            id="oci-userId"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label" for="oci-fingerprint">
            {{t "modalAddCloudKey.oci.userFingerprint.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            name="fingerprint"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.oci.userFingerprint.placeholder")
            value=config.fingerprint
            id="oci-fingerprint"
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="oci-privateKeyPassphrase">
            {{t "modalAddCloudKey.oci.secretKeyPassphrase.label"}}
          </label>
          {{input
            type="password"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.oci.secretKeyPassphrase.placeholder")
            value=config.privateKeyPassphrase
            id="oci-privateKeyPassphrase"
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="oci-privateKeyContents">
            {{t "modalAddCloudKey.oci.secretKey.label"}}{{field-required}}
          </label>
          {{input-text-file
            classNames="box"
            value=config.privateKeyContents
            multiple=False
            canChangeName=false
            accept="text/plain,.pem,.pkey,.key"
            minHeight=40
            placeholder="modalAddCloudKey.oci.secretKey.placeholder"
            shouldChangeName=false
            concealValue=true
          }}
        </div>

      </div>

    {{else if (eq cloudCredentialType "pnap")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="pnap-client-identifier">
            {{t "modalAddCloudKey.pnap.clientIdentifier.label"}}{{field-required}}
          </label>
          {{input
          type="text"
          value=config.clientIdentifier
          classNames="form-control"
          id="pnap-client-identifier"
          placeholder=(t "modalAddCloudKey.pnap.clientIdentifier.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label" for="pnap-client-secret">
            {{t "modalAddCloudKey.pnap.clientSecret.label"}}{{field-required}}
          </label>
          {{input
          type="password"
          value=config.clientSecret
          classNames="form-control"
          id="pnap-client-secret"
          placeholder=(t "modalAddCloudKey.pnap.clientSecret.placeholder")
          }}
          <p class="text-info">
            {{t "modalAddCloudKey.pnap.clientSecret.help" htmlSafe=true}}
          </p>
        </div>
      </div>

    {{else if (eq cloudCredentialType "vmware")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.vcenter.label"}}{{field-required}}
          </label>
          {{input-url
            classNames="form-control"
            id="server-url"
            value=config.vcenter
            isInvalid=(action (mut urlInvalid))
            urlWarning=(action (mut urlWarning))
            urlError=(action (mut urlError))
            placeholder=(t "nodeDriver.vmwarevsphere.vcenter.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.vcenterPort.label"}}{{field-required}}
          </label>
          {{input-integer
            min=1
            max=65535
            class="form-control"
            value=config.vcenterPort
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.username.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.username
            classNames="form-control"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.password.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.password
            classNames="form-control"
          }}
        </div>
      </div>
      <p class="help-block">{{t "nodeDriver.vmwarevsphere.access.help"}}</p>
    {{/if}}
  </div>


  {{top-errors errors=errors}}
  <div class="footer-actions">
    {{save-cancel
      cancel=cancelAdd
      editing=isEdit
      save=(action "save")
      savingLabel=savingLabel
    }}
  </div>
</section>
